<template>
  <view class="extract-b">
    <cash :option="props.option"></cash>
    <view class="tips" v-if="props.option.transferRemark || props.option.reason">
      {{props.option.status === 3 ? props.option.reason : props.option.transferRemark}}
    </view>
    <view class="state">
      <view class="time">{{props.option.updatedAt}} {{props.option.status === 1 ? '提交' : '完成'}}</view>
      <view class="u-center" @click="isShow = !isShow">
        <img :src="statusOPtion.img" class="img">
        <view class="text" :style="{color: statusOPtion.color}">{{props.option.statusText}}</view>
        <uni-icons :type="isShow ? 'top' : 'bottom'" size="18" color="#cccccc"></uni-icons>
      </view>
    </view>
    <step :status="props.option.status" v-show="isShow"></step>
  </view>
</template>

<script setup>
import Cash from './cash'
import Step from '../step'
import { computed, ref } from 'vue'
const props = defineProps({
  option: {
    type: Object,
    default: () => {}
  }
})
const isShow = ref(false)
const statusOPtion = computed(() => {
  // 1，平台审核；2，平台审核失败；3，银行处理, 4，到账成功，
  // 1，待审批 2，待转账 3，已拒绝 4，已完成
  let style = {}
  switch (props.option.status) {
    case 1:
      style = {
        color: '#FF5400',
        img: 'https://img.qumoyugo.com/webimgbg/pets-icon-tx-checking.png'
      }
      break
    case 2:
      style = {
        color: '#FFAC51',
        img: 'https://img.qumoyugo.com/webimgbg/pet-icon-refresh-circle-fill.png'
      }
      break
    case 3:
      style = {
        color: '#E02020',
        img: 'https://img.qumoyugo.com/webimgbg/pet-icon-erro-circle-fill.png'
      }
      break
    case 4:
      style = {
        color: '#09BB07',
        img: 'https://img.qumoyugo.com/webimgbg/pet-icon-sure-circle-fill-y.png'
      }
      break
  }
  return style
})
</script>

<style scoped lang="scss">
.extract-b{
  .tips{
    background: #FFFAF1;
    border-radius: 8rpx;
    line-height: 36rpx;
    font-size: 26rpx;
    color: #EE751E;
    padding: 14rpx;
    margin: 12rpx 0;
  }
  .state{
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
  }
  .time{
    color: #999999;
  }
  .img{
    width: 38rpx;
    height: 38rpx;
  }
  .text{
    padding: 0 12rpx;
  }
}
</style>
